<template>
	<view class="detail">
        <SRV-topbar title="我的业务" :isLeft="true"></SRV-topbar>
        <view>
            <view class="columbTitle"><image src="https://hdsq.aoorange.cn/attachment/xcx/new_2022/base.png" mode="aspectFill"></image>基础信息</view>
            <view class="list-box">
                <view class="list-left"> 当前等级：{{info.roleName}} </view>
                <view class="list-right" @click="jump('credits_list', 'achievement')"> 业绩值：{{info.achievement}} </view>
            </view>
            <view class="list-box">
                <view class="list-left"  @click="jump('credits_list', 'achievement')"> 直推业绩：{{info.one}} </view>
                <view class="list-right" @click="jump('credits_list', 'achievement')"> 团队业绩：{{info.two}} </view>
            </view>
        </view>
        <view v-if="business.isShow">
            <view class="columbTitle" ><image src="https://hdsq.aoorange.cn/attachment/xcx/new_2022/parent.png" mode="aspectFill"></image>{{business.role}}</view>
            <view class="list-box">
                <view class="list-left"> {{business.title}} </view>
                <view class="list-right"> {{business.no}} </view>
            </view>
            <view class="list-box">
                <view class="list-left"> {{business.username}} </view>
                <view class="list-right" @click="callPhone()"> <image src="https://hdsq.aoorange.cn/attachment/xcx/new_2022/tel.png" mode="aspectFill"></image>{{business.mobile}} </view>
            </view>
        </view>
        <view class="columbTitle"><image src="https://hdsq.aoorange.cn/attachment/xcx/new_2022/extend.png" mode="aspectFill"></image>业务情况</view>
        <view class="list-box" v-for="(item,index) in childList" :key="index">
        	<view class="title"> {{item.title}} </view>
        	<view class="val"> {{item.num}} </view>
        	<view class="btn">
                <text class="btn-item" v-for="(item2,index2) in item.buttonList" :key="index2" @click="operateFun(item2.type, index)">
                    {{item2.title}}
                </text>
            </view>
        </view>
        <uni-popup ref="pickupCode" type="center">
            <view class="pickupCode-box">
                <image class="img" :src="showItem.img" ></image>
                <view class="pickupCode-t">{{showItem.title}}</view>
                <view class="pickupCode-c" @click="closePickup()">关闭</view>
            </view>
        </uni-popup>
	</view>
</template>

<script>
	var _self;
	import serve from '../../static/request.js';
	import common from '../../static/jump.js';
	export default {
		data() {
			return {
                info: {
                    roleName: '',
                    achievement: 0,
                    one: 0.00,
                    two: 0.00,
                },
                business: {
                    isShow: false,
                },
                childList: [],
                showItem: {
                    img: '',
                    title: '',
                }
			}
		},
		methods: {
			getInfo() {
				serve.request({
					url: '/member/batch/business',
					data: {
						appkey: uni.getStorageSync('appkey'),
						'access-token': uni.getStorageSync('access-token')
					},
                    v: '/v2'
				}).then(res => {
                    if(res.code != 200) {
                        uni.showToast({
                        	title: res.message,
                        	icon: 'none',
                        	success() {
                        		setTimeout(function() {
                        			common.jump('return_one');
                        		}, 1000)
                        	}
                        });
                    }
					_self.info = res.data.info;
                    _self.childList = res.data.childList;
                    _self.business = res.data.business;
				});
			},
            operateFun(type, i) {
                let item = _self.childList[i];
                if(type == 'showCode') {
                    _self.showItem.img = item.codeUrl;
                    _self.showItem.title = item.title;
                    _self.$refs.pickupCode.open();
                    return ;
                }
                if(type == 'list') {
                    uni.navigateTo({
                        url: '/pages/my/myBusinessList?type=' + item.role
                    });
                    return ;
                }
            },
			// 快捷拨打电话
			callPhone() {
				uni.makePhoneCall({
				    phoneNumber: _self.business.mobile
				});
			},
            closePickup() {
                _self.$refs.pickupCode.close();
            },
			jump(jump_type, jump_link) {
				common.jump(jump_type, jump_link)
			}
		},
		onLoad() {
			_self = this;
			_self.getInfo();
		},
		onPullDownRefresh() {
			_self.getInfo();
		},
	}
</script>

<style scoped lang="scss">
	.detail {
		font-size: 36rpx;
		color: #1e2022;
	}
    .title{
        width: 30%;
    }
    .val{
        width: 20%;
        text-align: center;
    }
    .btn{
        width: 50%;
        text-align: right;
    }
    .btn-item{
        padding: 5rpx 20rpx;
        border: 1rpx solid #FFBC00;
        color: #FFBC00;
        margin-left: 20rpx;
        border-radius: 20rpx;
    }
    .columbTitle {
        padding: 20rpx;
        font-size: 40rpx;
        border-bottom: 2rpx solid #ccc;
    }
    .line{
        padding: 20rpx;
        border-bottom: 1rpx solid #ddd;
    }
	.list-box {
		border-bottom: 2rpx solid #eaeaea;
		display: flex;
		justify-content: space-between;
		align-content: center;
		padding: 30rpx 20rpx;
	}
	.but-box {
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		background: #ffffff;
	}
    image {
    	width: 40upx;
    	height: 40upx;
        margin-right: 20rpx;
    }
    
    .bottom {
    	width: 100%;
    	height: 100rpx;
    	line-height: 100rpx;
    	text-align: center;
    	font-size: 32rpx;
    	color: rgba(255, 255, 255, 1);
    	background: rgba(251, 202, 63, 1);
    	bottom: 0rpx;
    	position: fixed;
    }
    
    .editTitleView {
        width: 80vw;
        height: 400rpx;
        background: #FFFFFF;
        border-radius: 20rpx;
        
        .title{
            width: 100%;
            text-align: center;
            font-size: 32rpx;
            height: 80rpx;
            line-height: 80rpx;
            border-bottom: 1rpx solid #aaa;
        }
        .editForm {
            display: flex;
            align-items: center;
            padding: 0px 40rpx;
            input{
                padding: 20rpx 30rpx;
                border: 2rpx solid;
                margin: 20rpx;
                width: 50%;
            }
        }
        .btn{
            font-size: 28rpx;
            padding: 20rpx 0;
            display: flex;
            justify-content: space-between;
            border-top: 1rpx solid #aaa;
            width: auto;
            text-align: center;
            view {
                width: 50%;
                height: 80rpx;
                line-height: 80rpx;
            }
        }
        .tip {
            padding: 20rpx 10rpx;
        }
        .red{
            color: red;
        }
    }
    
    .pickupCode-box {
        width: 80vw;
        height: 670rpx;
        background: #fff;
        border-radius: 8rpx;
    }
    .pickupCode-t {
        text-align: center;
        font-size: 36rpx;
        height: 60rpx;
        line-height: 60rpx;
        padding: 10rpx;
    }
    .pickupCode-c {
        border-top: 2rpx solid #aaa;    
        text-align: center;
        font-size: 36rpx;
        padding-top: 10rpx;
        height: 60rpx;
        line-height: 60rpx;
        font-weight: 600;
        letter-spacing: 20rpx;
    }
    .img{
    	width: 480rpx;
        height: 480rpx;
        position: relative;
        left: 50%;
        margin-left: -240rpx;
        margin-top: 30rpx;
    }
</style>